import { CustomSubTitle } from "@/components/customTitle";
import { Flex } from "antd";
import vipBookingStore from "@/store/vipbookingStore";
import styled from "styled-components";
const StyledDiv = styled("div")`
  //styleName: 08 Action Text EN/Regular;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #696767;
`;

const StyledlWeight = styled(StyledDiv)`
  color: #202020;
`;
const StyledWeight = styled(StyledDiv)`
  font-weight: 700;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #202020;
`;

interface PaymentInfomation {
  data?: any;
}

const PaymentInfomation = ({ data }: PaymentInfomation) => {
  const { vipBookingData } = vipBookingStore();
  const basicInfo = data || vipBookingData?.basicInfo || {};

  return (
    <>
      <CustomSubTitle>Payment Information</CustomSubTitle>
      <Flex justify="space-between" style={{ marginBottom: "20px" }}>
        <StyledDiv>Car Park Booking Fee</StyledDiv>
        <StyledlWeight>HK${basicInfo?.pymPrice}</StyledlWeight>
      </Flex>

      <Flex justify="space-between">
        <StyledDiv>Total Amount</StyledDiv>
        <StyledWeight>HK${basicInfo?.pymPrice}</StyledWeight>
      </Flex>
      {/* <div className="booking-fee">
        <span className="unit-fee"></span>
        <span className="unit-fee-values"></span>
      </div> */}
      {/* <div className="booking-discount">
        <span className="discount">DPP Permit Discount</span>
        <span className="discount-values">-</span>
      </div> */}
    </>
  );
};

export default PaymentInfomation;
